<template>
  <div class="app-container-line">
    <el-form>
      <el-form-item label="线型：">
        <el-select v-model="lineType" placeholder="请选择" size="mini" @change="changeLineType">
          <el-option
            v-for="item in allLineType"
            :key="item.lab + '1000'"
            :label="item.lab"
            :value="item.val"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "lineStyle",
  props: ["line", "editor", "graph", "parent"],
  data() {
    return {
      lineType: "",
      allLineType: [
        { lab: "直线", val: "1" },
        { lab: "密集点线", val: "1 1 1 1" },
        { lab: "直点线", val: "1 10 10 1" },
        { lab: "稀疏点线", val: "1 11" },
        { lab: "稀疏点线2", val: "1 11 5 15 3 17 2 2" },
      ],
    };
  },
  watch: {
    line(n, o) {
      // 空，非线条
      if (!n) return;
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 改变cell.style中的某个值
    ChangeCellStyleItem(type, value) {
      let tmpCell = this.graph.getSelectionCells()[0];
      if (tmpCell.style && tmpCell.style.indexOf(type) != -1) {
        // 已有当前要改变样式相关样式
        let styleArr = tmpCell.style.split(";");
        let index = styleArr.findIndex(item => item.indexOf(type) != -1); // 相关样式在样式数组中的位置
        styleArr[index] = styleArr[index].substring(0, type.length + 1) + value; // 删除原有数值并拼接新数值
        this.graph.getModel().setStyle(tmpCell, styleArr.join(";"));
      } else {
        // 无样式或者无type相关样式
        this.graph.getModel().setStyle(tmpCell, (tmpCell.style += ";" + type + "=" + value));
      }
    },
    changeLineType(val) {
      this.ChangeCellStyleItem("dashed", "1");
      this.ChangeCellStyleItem("dashPattern", val);
      this.graph.refresh();
    },
  },
};
</script>

<style scoped>
.app-container-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: #fff;
}
</style>
